
<template>
  <el-menu
    :uniqueOpened="false"
    :collapse="store.state.sidebarCollapse"
    :router="false"
    :default-active="store.state.defaultActive"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    :collapse-transition="false"
    @select="select"
  >
    <template v-for="item in sideList">
      <template v-if="item.children">
        <el-submenu :index="item.path" :key="'p' + item.path">
          <template #title>
            <i :class="item.icon"></i>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item
            v-for="ele in item.children"
            :key="'c' + ele.path"
            :index="ele.path"
            >{{ ele.title }}</el-menu-item
          >
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item :index="item.path" :key="item.path">
          <i :class="item.icon"></i>
          <template #title>{{ item.title }}</template>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>
<script setup lang="ts">
import { useStore } from "vuex";
import { reactive } from "vue";
import { useRoute, useRouter } from "vue-router";

const store = useStore();
const router = useRouter();
const sideList = reactive([
  { path: "/overview", title: "概览", icon: "el-icon-s-help" },
  {
    path: "/staff",
    title: "人员",
    icon: "el-icon-user-solid",
    children: [
      { path: "/staff/staff", title: "人员" },
      { path: "/staff/depart", title: "部门" },
      { path: "/staff/promission", title: "权限" },
    ],
  },
  { path: "/device", title: "设备", icon: "el-icon-menu" },
  { path: "/grid", title: "布局", icon: "el-icon-menu" },
  { path: "/utils", title: "封装测试", icon: "el-icon-menu" },
  { path: "/drag", title: "拖放", icon: "el-icon-menu" },
  { path: "/svg", title: "svg", icon: "el-icon-menu" },
]);
let select = (index, indexPath) => {
  router.push(index).then(() => {
    store.commit("setDefaultActive", index);
  });
};
</script>
<style lang="scss">
</style>